<template>
    <div class="container" style="width: ;">
        <h2 style="text-align: center;background-color:;padding: 10px 0;margin-bottom: ;">- 消息列表 -</h2>
      <n-card style="margin-top: ;width: 100%;" v-for="(item,index) in noticeList" :key="index">
        <div style="font-size: 14px;color: #ccc;">{{ item.create_time }}</div>
        <div style="display: flex; justify-content: space-between;">
            <div style="font-size: 16px;" class="content">{{ item.content }}</div>
            <div class="handle">
                <n-button v-if="item.isRead ==0" size="small" style="margin-right: 10px;" @click="read(item.id)">标记为已读</n-button>
                <n-tag  v-if="item.isRead ==1" style="margin-right: 10px;">已读</n-tag>
                <n-button type="error" size="small" @click="deleteMsg(item.id)">删除</n-button>
            </div>
        </div>
      </n-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import router from '@/router';
  import requestList from '@/service/request';
  import { getItem } from '@/utils/local';
  import { onMounted, ref } from 'vue';
  
  const noticeList = ref<any[]>([])
  const getNoticeList = async () => {
    const res = await requestList.getMsgByUserApi({userId:getItem('curUserInfo')})
    if(res.code === 1){
        noticeList.value = res.data as any
    }
  }

  const read = async (id:number) => {
    const postData = {
        ids:[id],
        isRead:1
    }
    const res = await requestList.changeReadStatusApi(postData)
    if(res.code === 1){ 
        getNoticeList()
    }
  }

  const deleteMsg = async (id:number) => {
    const postData = {
        ids:[id],
    }
    const res = await requestList.UserDeleteMsgApi(postData)
    if(res.code === 1){ 
        getNoticeList()
    }
  }


  onMounted(()=>{
    getNoticeList()
  })
  
  </script>
  
  <style lang="scss" scoped>
  </style>